<template>
    <div>
        <a-modal
         v-model:visible="breedInforVisible" 
         :title="formData.modalTitle"
         width="70%"
        >
            <div>
                <table border="1" style="width: 100%;">
                    <tr>
                        <th>
                            <div class="breed-table-text">年度</div>
                        </th>
                        <th colspan="3">
                            <div class="breed-table-text">生产批次</div>
                        </th>
                    </tr>
                    <tr v-for="(item,index) in listData" :key="index">
                        <td>
                            <div class="breed-table-text">
                                <span>{{ item.annual }}</span>
                            </div>
                        </td>
                        <td>
                            <div class="breed-table-text">
                                <span>{{ item.num1 }}</span>
                                <a-button style="margin: 0 5px;" class="blue-btn" @click="batchDetailsClick(item,item.num1)" type="primary">批次详情</a-button>
                            </div>
                        </td>
                        <td>
                            <div class="breed-table-text">
                                <span>{{ item.num2 }}</span>
                                <a-button style="margin: 0 5px;" class="blue-btn" @click="batchDetailsClick(item,item.num2)" type="primary">批次详情</a-button>
                            </div>
                        </td>
                        <td>
                            <div class="breed-table-text">
                                <span>{{ item.num3 }}</span>
                                <a-button style="margin: 0 5px;" class="blue-btn" @click="batchDetailsClick(item,item.num3)" type="primary">批次详情</a-button>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <template slot="footer">
                <div>
                    <a-button @click="handleCancel" style="margin-right: 10px;">关闭</a-button>
                    <a-button v-if="false" @click="handleOk" type='primary'>确定</a-button>
                </div>
            </template>
        </a-modal>
        <batchDetails ref="batchDetailsRef" />
    </div>
</template>
<script>
import batchDetails from './batchDetails.vue'
export default {
    components:{
        batchDetails,
    },
    props:{

    },
    data(){
        return{
            formData:{},
            listData:[{
                annual:'2025',
                num1:'20250001',
                num2:'20250002',
                num3:'20250003',
                id:3
            },{
                annual:'2024',
                num1:'20240001',
                num2:'20240002',
                num3:'20240003',
                id:2
            },{
                annual:'2023',
                num1:'20230001',
                num2:'20230002',
                num3:'20230003',
                id:1
            }],
            breedInforVisible:false,
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.formData = val
        },
        handleCancel(){
            this.breedInforVisible = false
        },
        handleOk(){
            this.breedInforVisible = false
        },
        detailSituationClick(row){
            this.$message.warning('开发中，敬请期待！')
        },
        batchDetailsClick(row,name){
            this.$refs.batchDetailsRef.batchDetailsVisible = true
            this.$refs.batchDetailsRef.getData({...this.formData,modalTitle:this.formData.ftymc+'--'+name})
        },
    }
}
</script>
<style lang="less">
.breed-table-text{
    padding: 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
</style>